<template>
    <section class="chat-container">
        <el-badge :is-dot="showRedDot" class="item">
            <el-button class="custom-button" :icon="ChatDotRound" @click="chatHandle"> 聊天
            </el-button>
        </el-badge>

        <el-dialog v-model="dialogVisible" style="width:900px;" :before-close="handleClose" :lock-scroll="true"
            :close-on-click-modal="false" :show-close="false">
            <section class="left-menu">
                <section class="menu-itme">
                    <img @error="defaultAvatar" :src="chatState.getUserInfo()?.avatar"
                        style="object-fit:cover;width:40px;height:40px;display:block;min-width:40px;min-height:40px;"
                        alt="">
                    <!-- <img @error="defaultAvatar" src="http://117.34.99.190:8083/images/2024/08/03/caca3a176bde64d78998ccc597baf633.png" style="object-fit:cover;width:40px;height:40px;display:block;min-width:40px;min-height:40px;" alt=""> -->
                    <!-- <el-image @error="defaultAvatar" :src="chatState.getUserInfo()?.avatar || defaultAvatar" fit="cover" /> -->
                </section>

                <section class="menu-itme" :class="[currentChat === index ? 'active-group' : '']"
                    @click="toggleTagStatus('chat')">
                    <el-badge :value="chatState.notReadyMessageCount" :hidden="chatState.notReadyMessageCount === 0">
                        <el-icon size="26" :color="chatState.tagStatus === 'chat' ? '#409eff' : '#e6e6e6'">
                            <svg t="1722353226059" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="878">
                                <path
                                    d="M512.2048 100.0448c-242.5856 0-439.1936 184.32-439.1936 411.7504 0 85.2992 27.648 164.4544 74.9568 230.1952L107.52 877.9776c-7.7824 26.0096 7.4752 42.3936 33.9968 36.5568L310.272 877.568c62.976 30.4128 131.9936 46.1824 201.9328 45.9776 242.5856 0 439.1936-184.32 439.1936-411.7504 0-227.328-196.608-411.7504-439.1936-411.7504z m-0.8192 772.096c-65.3312 0-126.8736-15.0528-180.8384-41.5744-28.7744-14.1312-163.1232 25.4976-163.1232 25.4976s43.2128-115.5072 26.5216-137.6256c-44.1344-58.5728-70.0416-130.048-70.0416-207.0528 0-199.168 173.4656-360.7552 387.584-360.7552S899.072 312.1152 899.072 511.3856 725.504 872.1408 511.3856 872.1408z m12.4928-416.0512c-27.8528 0.4096-50.176 23.3472-49.7664 51.2-0.4096 27.8528 21.9136 50.7904 49.7664 51.2 27.8528-0.4096 50.0736-23.3472 49.7664-51.2-0.1024-28.2624-22.3232-51.2-49.7664-51.2z m-188.7232 0c-27.8528 0.4096-50.176 23.3472-49.7664 51.2-0.4096 27.8528 21.9136 50.7904 49.7664 51.2 27.8528-0.4096 50.0736-23.3472 49.7664-51.2 0-28.2624-22.2208-51.2-49.7664-51.2z m378.2656 0c-27.8528 0.4096-50.176 23.3472-49.7664 51.2-0.4096 27.8528 21.9136 50.7904 49.7664 51.2 27.8528-0.4096 50.0736-23.3472 49.7664-51.2 0-28.2624-22.2208-51.2-49.7664-51.2z"
                                    p-id="879"></path>
                            </svg>
                        </el-icon>
                    </el-badge>
                </section>

                <section class="menu-itme" :class="[currentChat === index ? 'active-group' : '']"
                    @click="toggleTagStatus('contacts')">
                    <el-badge :value="chatState.newRequestList.length" v-if="chatState.isShowBadge">
                        <el-icon :color="chatState.tagStatus === 'contacts' ? '#409eff' : '#e6e6e6'" size="30">
                            <svg t="1722353703354" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1311" width="84" height="84">
                                <path
                                    d="M711.602525 387.791094l215.391628 0c16.918321 0 29.658484 8.594749 29.658484 26.744107 0 18.154475-14.712073 26.749224-31.629371 26.749224L711.602525 441.284425c-16.925485 0-30.656207-8.594749-30.656207-26.749224C680.946318 396.384819 694.677041 387.791094 711.602525 387.791094z"
                                    p-id="1312"></path>
                                <path
                                    d="M956.088796 537.099654c0 18.151405-12.748349 26.752294-29.661553 26.752294L757.275751 563.851948c-16.925485 0-30.65723-8.597819-30.65723-26.752294 0-18.149359 13.731746-26.743084 30.65723-26.743084l170.132842 0C944.324868 510.35657 956.088796 518.950296 956.088796 537.099654z"
                                    p-id="1313"></path>
                                <path
                                    d="M800.847106 814.385958c0 39.784098-32.308847 64.12446-72.02643 64.12446L466.867592 878.510418l-84.297918 0-245.941412 0c-39.711444 0-72.024383-24.337291-72.024383-64.12446l0-17.287735c0-36.45426 26.839275-68.769246 61.099566-81.065294l146.643871-65.364707c0 0 39.749306-12.218276 50.631144-24.411993 7.239891-8.121981 9.473769-34.901905 0.296759-52.481282-9.174963-17.577331-83.47825-114.289999-83.47825-195.409528 0-130.822534 85.99149-236.876965 192.06127-236.876965 106.073874 0 192.058201 106.054431 192.058201 236.876965 0 84.695984-83.380012 177.934528-90.234117 200.878077-6.859221 22.943548-7.41283 40.902572 0.333598 48.523133 12.050454 11.843746 43.062771 23.88806 43.062771 23.88806l162.670893 63.391772c34.262338 12.301164 61.10059 45.601594 61.10059 82.055854L800.847106 814.385958 800.847106 814.385958z"
                                    p-id="1314"></path>
                                <path
                                    d="M926.918429 679.299307 813.853327 679.299307c-16.921391 0-30.653137-8.594749-30.653137-26.752294 0-18.147312 13.731746-26.743084 30.653137-26.743084l114.049522 0c16.921391 0 29.647227 8.594749 29.647227 26.743084C957.549054 670.701488 943.837774 679.299307 926.918429 679.299307z"
                                    p-id="1315"></path>
                            </svg>
                        </el-icon>
                    </el-badge>
                    <el-icon v-else :color="chatState.tagStatus === 'contacts' ? '#409eff' : '#e6e6e6'" size="30">
                        <svg t="1722353703354" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="1311" width="84" height="84">
                            <path
                                d="M711.602525 387.791094l215.391628 0c16.918321 0 29.658484 8.594749 29.658484 26.744107 0 18.154475-14.712073 26.749224-31.629371 26.749224L711.602525 441.284425c-16.925485 0-30.656207-8.594749-30.656207-26.749224C680.946318 396.384819 694.677041 387.791094 711.602525 387.791094z"
                                p-id="1312"></path>
                            <path
                                d="M956.088796 537.099654c0 18.151405-12.748349 26.752294-29.661553 26.752294L757.275751 563.851948c-16.925485 0-30.65723-8.597819-30.65723-26.752294 0-18.149359 13.731746-26.743084 30.65723-26.743084l170.132842 0C944.324868 510.35657 956.088796 518.950296 956.088796 537.099654z"
                                p-id="1313"></path>
                            <path
                                d="M800.847106 814.385958c0 39.784098-32.308847 64.12446-72.02643 64.12446L466.867592 878.510418l-84.297918 0-245.941412 0c-39.711444 0-72.024383-24.337291-72.024383-64.12446l0-17.287735c0-36.45426 26.839275-68.769246 61.099566-81.065294l146.643871-65.364707c0 0 39.749306-12.218276 50.631144-24.411993 7.239891-8.121981 9.473769-34.901905 0.296759-52.481282-9.174963-17.577331-83.47825-114.289999-83.47825-195.409528 0-130.822534 85.99149-236.876965 192.06127-236.876965 106.073874 0 192.058201 106.054431 192.058201 236.876965 0 84.695984-83.380012 177.934528-90.234117 200.878077-6.859221 22.943548-7.41283 40.902572 0.333598 48.523133 12.050454 11.843746 43.062771 23.88806 43.062771 23.88806l162.670893 63.391772c34.262338 12.301164 61.10059 45.601594 61.10059 82.055854L800.847106 814.385958 800.847106 814.385958z"
                                p-id="1314"></path>
                            <path
                                d="M926.918429 679.299307 813.853327 679.299307c-16.921391 0-30.653137-8.594749-30.653137-26.752294 0-18.147312 13.731746-26.743084 30.653137-26.743084l114.049522 0c16.921391 0 29.647227 8.594749 29.647227 26.743084C957.549054 670.701488 943.837774 679.299307 926.918429 679.299307z"
                                p-id="1315"></path>
                        </svg>
                    </el-icon>

                </section>
            </section>
            <section style="flex:1">
                <section class="slot-header-content">
                    <section class="left-slot-content">
                        <section class="add-friends" style="padding: 0 5px;box-sizing: border-box;">
                            <section style="display: flex;align-items:center;width: 100%;">
                                <section class="search-parent-node" v-show="isAddFriends">
                                    <el-input v-model="keyword" @input="searchFriends" size="small"
                                        style="width:150px; height: 24px;" placeholder="输入关键字搜索" clearable />
                                    <el-button size="small" @click="cancelHandle">取消</el-button>
                                    <SearchResult :friendsList="searchResult" @listenResult="cancelHandle" />
                                </section>
                                <section class="search-parent-node" v-show="!isAddFriends">
                                    <el-input size="small" style="width:150px; height: 24px;" placeholder="点击添加好友"
                                        @click="addFriends" clearable />
                                    <!-- <el-button type="primary" size="small" @click="addFriends"> -->
                                    <img src="../assets/images/add-user.png"
                                        style="width: 25px; height: 24px; cursor: pointer;" @click="addFriends" />
                                    <!-- <svg t="1722245220938" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                            xmlns="http://www.w3.org/2000/svg" p-id="4259" width="16" height="16">
                                            <path
                                                d="M815.663044 781.930779c-44.225247-92.710518-362.246301-85.757153-241.070474-226.907916 39.671535-46.6249 81.499176-109.61042 81.499176-177.099511 0-121.955586-81.158415-221.082234-180.976818-221.082234-99.722212 0-181.076078 99.126648-181.076078 221.082234 0 67.490114 25.568329 112.74276 76.650751 175.924755C454.934307 678.199253 179.477674 687.307701 137.846508 776.006859c-12.341073 26.348088-14.499226 46.774303-14.304797 70.328765 0 3.038196-0.289596 6.170536 1.226944 8.667404 1.517563 2.451842 3.869121 3.968381 6.418176 3.968381l686.876889 0c2.449795 0 4.848425-1.517563 6.317892-3.968381 1.517563-2.496867 1.224898-5.582135 1.224898-8.667404C826.098721 819.986513 822.569338 796.378839 815.663044 781.930779z"
                                                fill="#ffffff" p-id="4260"></path>
                                            <path
                                                d="M937.190889 491.418242l-91.044576 0 0-91.033319c0-12.592806-10.223852-22.772656-22.760376-22.772656-12.570293 0-22.760376 10.17985-22.760376 22.772656l0 91.033319-91.045599 0c-12.580526 0-22.772656 10.17985-22.772656 22.782889 0 12.536524 10.19213 22.762423 22.772656 22.762423l91.045599 0 0 91.044576c0 12.558014 10.190083 22.738887 22.760376 22.738887 12.536524 0 22.760376-10.17985 22.760376-22.738887l0-91.044576 91.044576 0c12.580526 0 22.760376-10.224876 22.760376-22.762423C959.952288 501.599116 949.771415 491.418242 937.190889 491.418242z"
                                                fill="#ffffff" p-id="4261"></path>
                                        </svg> -->
                                    <!-- </el-button> -->
                                </section>
                            </section>
                        </section>
                        <section class="current-chat-user">{{ chatState.currentChatName }}</section>
                    </section>
                    <!-- <section class="chat-close-icon" @click="dialogVisible = false"> -->
                    <section>
                        <img src="../assets/images/cancel.png" @click="dialogVisible = false"
                            style="width: 20px; height: 20px; cursor: pointer; margin-right: 10px;" />
                        <!-- <el-icon size="16" color="#F56C6C">
                            <svg t="1722354698507" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2558">
                                <path
                                    d="M551.71714575 494.68679744l261.2707066 261.18381862a40.22891139 40.22891139 0 1 1-56.99819877 56.99819808L494.63205973 551.77188348 233.27446588 813.04258937a40.22891139 40.22891139 0 1 1-56.99819808-57.08508604l261.27070589-261.18381861L176.2762678 233.41609087A40.22891139 40.22891139 0 1 1 233.27446588 176.41789211L494.63205973 437.60171073 755.98965357 176.33100482a39.96824888 39.96824888 0 0 1 56.99819878 0 40.22891139 40.22891139 0 0 1 0 56.99819877L551.71714575 494.68679744z"
                                    p-id="2559"></path>
                            </svg>
                        </el-icon> -->

                    </section>
                </section>

                <section class="chat-outer-container">
                    <section>
                        <ChatGroup v-show="chatState.tagStatus === 'chat'" @toggleGroup="toggleGroup" />
                        <Contact v-show="chatState.tagStatus === 'contacts'" @toggleContact="toggleContact" />
                    </section>
                    <section class="chat-history-list-wrapper" v-show="chatState.tagStatus === 'contacts'">
                        <ContactDetail @toggleGroup="toggleGroup" :contactType="contactType"
                            :target="currentPreviewTarget" @updatePreview="updatePreview" />
                    </section>
                    <section class="chat-history-list-wrapper" v-show="chatState.tagStatus === 'chat'">
                        <section>
                            <el-scrollbar v-show="chatState.tagStatus === 'chat'" height="400px" always
                                ref="scrollNode">
                                <section ref="scrollInnerNode" v-show="chatState.currentChatTargetId !== 0">
                                    <ChatMessageItem :message-data="chatState.currentMessageList"
                                        :user-id="chatState.getUserInfo()?.id" />

                                </section>
                            </el-scrollbar>
                            <ContactDetal v-show="chatState.tagStatus === 'contacts'" />
                        </section>
                        <section class="input-chat-message-wrapper" v-show="chatState.currentChatTargetId !== 0">
                            <section class="opration-tools">
                                <input hidden type="file" @change="fileImageChange" ref="fileImageNode"
                                    accept=".jpg,.png,.jpeg,.gif,.webp">
                                <!-- <input hidden type="file" @change="fileChange" ref="fileNode"
                                    accept=".txt,.doc,.docx,.mp3,.avi,.mp4,.zip,.pdf,.mov,.xlsx,.xls"> -->

                                <el-tooltip class="box-item" effect="dark" content="发送图片" placement="bottom">
                                    <el-icon class="opration-icon-item" @click="fileImageHandle" size="24">
                                        <PictureFilled />
                                    </el-icon>
                                </el-tooltip>
                                <!-- <el-icon class="opration-icon-item" @click="fileHandle" size="24">
                                    <FolderRemove />
                                </el-icon> -->
                            </section>
                            <section class="input-chat-message-outer">
                                <el-input v-model="content" placeholder="请输入内容 按enter键发送" show-word-limit
                                    type="textarea" style="border: none;" class="input-chat-message-inner"
                                    @keyup="keyHandle" />
                            </section>
                            <section style="padding:15px ; text-align:right">
                                <el-button type="primary" @click="sendMessage"> 发 送 </el-button>
                            </section>
                        </section>
                    </section>
                </section>

            </section>
        </el-dialog>
    </section>
</template>

<script setup>
import SocketInstance from '@/socket';
import { ChatMessage } from '@/stores/chat';
import { defaultAvatar } from '@/utils';
import { ChatDotRound, PictureFilled } from "@element-plus/icons-vue";
import { ElNotification } from 'element-plus';

const chatState = ChatMessage()
const dialogVisible = ref(false)
const content = ref('')
const scrollNode = ref()
const scrollInnerNode = ref()
const keyword = ref('')
const isAddFriends = ref(false)
const fileImageNode = ref()

const searchResult = ref([])
const contactType = ref('') // 联系人类型
const currentPreviewTarget = ref(null) // 当前切换预览的目标对象，群组、好友  
const showRedDot = ref(false)

const conectionCount = ref(0)
const timer = ref(0)

onMounted(() => {
    if (!chatState.getToken()) return;
    if (chatState.getUserInfo()?.id) {
        chatState.setChatBtnStatus(true)
    }
})

watch(() => chatState.showChatBtn, (nVal) => {
    if (nVal) {
        socketEventListener()
    } else {
        SocketInstance.socketInstance.close()
    }
})
watch(() => chatState.isLogin, (nVal) => {
    if (!nVal) {
        dialogVisible.value = false
    } 
})

const socketEventListener = () => {
    SocketInstance.createSocket(chatState.getToken())
    SocketInstance.socketInstance.onopen = (e) => {
        // console.log(e, '已连接');
        clearTimeout(timer.value)
    }
    SocketInstance.socketInstance.onmessage = (e) => {
        let data = JSON.parse(e.data)
        let uuid = `${chatState.getUserInfo()?.id},${data.messageData.receiverId}`

        if (data.messageType !== 4) {
            chatState.addChatMessage({
                friendId: data.messageData.receiverId || data.messageData.groupId,
                ...data, uuid
            })
            chatState.updateCurrentMessageList()
        } else {
            chatState.getNewRequestFriends()
            ElNotification({ title: '好友请求提示', message: '您有新的好友请求认证', type: 'warning', duration: 0 })
        }


        if (data.messageData.receiverId) {
            scrollBottom()
            if (!dialogVisible.value) {
                showRedDot.value = true
            }
        }
        // console.log(data, '已接受');

    }
    SocketInstance.socketInstance.onclose = () => {
        // ElNotification({ title: 'socket提示', message: 'socket连接已关闭', type: 'error' })
        chatState.initStoreData()
    }

    SocketInstance.socketInstance.onerror = () => {

        if (conectionCount.value <= 5) {
            timer.value = setTimeout(() => {
                SocketInstance.createSocket(chatState.getToken())
                conectionCount.value++
            }, 30000)
        } else {
            ElNotification({ title: 'socket提示', message: 'socket连接出错, 正在尝试重新连接...', type: 'error' })
        }
    }
}

watch(() => chatState.currentMessageList, (n, o) => {
    scrollBottom()
})


const updatePreview = () => {
    currentPreviewTarget.value = {}
}

const searchFriends = async (e) => {
    if (!e) return;
    let { results = [] } = await useHttpGet(`/api/user/list?condition=${e}`)
    searchResult.value = results
}

const chatHandle = async () => {
    let res = await useHttpGet(`/api/user/current`)
    if (res && res.id) {
        if (res && res.id) {
            localStorage.setItem('user', JSON.stringify(res))
        }
        dialogVisible.value = true
        showRedDot.value = false
    } else {
        useMsgSignIn();
        return;
    }

}

const handleClose = () => {

}

const toggleTagStatus = async (status) => {
    chatState.changeTagStatus(status)
    if (status === 'contacts') {
        chatState.getFriendsList()
        chatState.getGroupList()
        chatState.getNewRequestFriends()
    }
}

const addFriends = () => {
    isAddFriends.value = true
}

const cancelHandle = () => {
    isAddFriends.value = false
    keyword.value = ''
    searchResult.value = []
}

const keyHandle = (event) => {
    let shiftKey = event.shiftKey

    if ((event.keyCode === 13 && shiftKey) || event.keyCode !== 13) {
        return
    }
    if (event.keyCode === 13) {
        event.preventDefault();
    }
    sendMessage()
}

const sendMessage = () => {

    if (!(content.value.replaceAll('\n', ''))) {
        content.value = ''
        return
    }

    let message = {
        chatType: chatState.chatType,
        receiverId: chatState.currentChatTargetId,
        contentType: 1,
        content: content.value.replaceAll('\n', ''),
        message: 'send'
    }

    // console.log(message);

    SocketInstance.socketInstance.send(JSON.stringify(message))

    content.value = ''
    scrollBottom()
}

const scrollBottom = () => {
    setTimeout(() => {
        if (!scrollNode.value) return;
        scrollNode.value.update()
        let scrollHeight = scrollInnerNode.value.clientHeight
        scrollNode.value.setScrollTop(scrollHeight)
    }, 300)
}

const toggleGroup = (g) => {

    chatState.setCurrentChatName(g.friendNickname || g.groupName || g.name)

    scrollBottom()
}

const toggleContact = (g) => {

    chatState.setCurrentChatName(g.friendNickname || g.groupName || g.name)
    contactType.value = g.friendsType
    currentPreviewTarget.value = g
}

const fileImageChange = async (e) => {
    const formData = new FormData();
    formData.append("image", e.target.files[0], e.target.files[0].name);
    const { url = '' } = await useHttpPostMultipart("/api/upload/chat", formData);

    if (url) {
        let message = {
            chatType: chatState.chatType,
            receiverId: chatState.currentChatTargetId,
            contentType: 2,
            content: url,
            message: 'send'
        }
        SocketInstance.socketInstance.send(JSON.stringify(message))
    }
    fileImageNode.value.value = ''
    scrollBottom()
}

const fileImageHandle = (e) => {
    fileImageNode.value.click()
}

</script>

<style lang="scss" scoped>
.flex-row {
    display: flex;
    align-items: center
}

.font-12 {
    font-size: 12px;
}

:deep() {
    .el-dialog {
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        margin: 0 !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        overflow-y: auto !important;
        overflow-x: auto !important;
        max-height: 90vh !important;
    }

    .input-chat-message-outer .el-textarea__inner {
        // background: #353636;
        // color: aliceblue;
        border: 1px solid #e9e9e9;
        height: 100px;
        max-height: 100px;
        box-shadow: none;
    }

    .el-dialog__title {
        color: aliceblue;
    }

    .el-dialog__header {
        border-bottom: 1px solid #c9c9c9;
        display: none !important;
    }

    .el-dialog {
        padding: 20px 10px;
    }

    .el-dialog__body {
        display: flex;
        justify-content: flex-start;
    }
}

:deep().left-menu {
    padding: 5px 0px;
    width: 70px;
    background-color: #383838;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: center;

    .menu-itme {
        &:first-child {
            padding-bottom: 20px;
        }

        padding: 10px 0;
        cursor: pointer;

        .el-image {
            width: 40px;
            height: 40px;
            min-height: 40px;

            .el-image__inner {
                width: 40px;
                height: 40px;
                min-height: 40px;
            }
        }
    }
}

.chat-history-list-wrapper {
    flex: 1
}

.input-chat-message-outer {
    margin: 0 15px;
}

.input-chat-message-wrapper {
    border-top: 1px solid #ececec;
}

.opration-tools {
    padding: 15px 0 15px 15px;
}

.chat-time-row {
    text-align: center;
    color: #555;
}

.opration-icon-item :hover {
    cursor: pointer;
}

.chat-outer-container {
    display: flex;
    justify-content: start;
}

.myself-chat {
    justify-content: end;

    .user-name {
        text-align: right;
    }

    .user-chat-content {
        flex-direction: column;
        display: flex;
        justify-content: end;
    }

    .user-avatar {
        margin: 0 0 0 10px;
    }

    .message-content {
        margin: 0 0px 0 50px !important;
    }
}

.chat-item {
    margin-left: 10px;
    padding: 12px 0;

    .chat-item-row {
        display: flex;
        align-items: self-start;

        .user-name {
            color: #bdbdbd;
        }

        .message-content {
            color: #cccdcf;
            font-size: 15px;
            background: #3e444d;
            padding: 10px;
            border-radius: 4px;
            margin: 0 60px 0 0;
            flex-wrap: wrap;
            word-break: break-all;
        }

        .user-avatar {
            width: 40px;
            height: 40px;
            min-height: 40px;
            object-fit: cover;
            border-radius: 5px;
            display: block;
            margin-right: 10px;
        }
    }
}

.slot-left-content {
    width: 50px;
}

.slot-header-content {

    border-bottom: 1px solid #ececec;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left-slot-content {
        display: flex;
        align-items: center;

        .add-friends {
            width: 220px;
            border-right: 1px solid #ececec;
            height: 50px;
            justify-content: space-between;
            display: flex;
        }
    }

    .current-chat-user {
        margin-left: 15px;

    }
}

.message-image {
    width: 80px;
    max-height: 120px;
    object-fit: cover;
}

.chat-close-icon {
    cursor: pointer;
    padding: 5px;
    opacity: 0.5;
    transition: opacity 1s;
    margin-right: 10px;

    &:hover {
        opacity: 1;
    }
}

.search-parent-node {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.custom-button {
    background-color: #296218;
    /* 按钮背景颜色 */
    color: white;
    /* 按钮文字颜色 */
    border-color: #296218;
    /* 按钮边框颜色 */
}
</style>